<template>
  <div class="login-page">
    <div class="login-card">
      <div class="brand"><div class="logo">OB</div><div class="name">找回密码</div></div>
      <form class="form" @submit.prevent="handleSubmit">
        <div class="form-item">
          <label>邮箱</label>
          <input v-model.trim="email" type="email" placeholder="请输入注册邮箱" required />
        </div>
        <button class="btn btn-primary" type="submit" :disabled="loading">{{ loading? '发送中...' : '发送重置邮件' }}</button>
        <div class="tips">我们会发送验证码或重置链接到你的邮箱</div>
      </form>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import request from '@/utils/request'

const email = ref('')
const loading = ref(false)

async function handleSubmit(){
  if(!email.value) return
  loading.value=true
  try{
    await request.post('/user/auth/password/forgot', { email: email.value })
    ElMessage.success('邮件已发送，请查收')
  }catch(e){
    ElMessage.error(e?.message||'发送失败，请重试')
  }finally{ loading.value=false }
}
</script>
<style scoped>
@import '@/assets/auth.css';
</style>

